import React, { Component } from 'react';
import { NavBar} from 'antd-mobile'
import {getFavlist,removeFav} from '../api/collect'
import '../styles/Collect.scss'
class Collect extends Component {
    constructor(props){
        super(props)
        this.state={
            clist:[]
        }
    }
    //左上角返回
    back() {
        this.props.history.goBack()
    }
    //获取收藏列表
  async componentDidMount(){
     let res=await getFavlist({userid:localStorage.getItem('id')})
            // console.log(res.data.list,"收藏列表");
            this.setState({
                clist:res.data.list
            })       
    }
    //点击取消收藏
   async removeCollect(id){
     let res1=await removeFav({userid:localStorage.getItem('id'),goodid:id})
     console.log(res1.data,'取消收藏');
    }
    render() {
        return (
            <div className='collect'>
                <NavBar onBack={() => { this.back() }}>我的收藏</NavBar>
                 <div className='goods'>
                  {
                  this.state.clist.length!=0?
                    this.state.clist.map((item,index)=>{
                        return (
                            <div className="gooditem" key={index}>
                                <img src={item.pic} alt="" />
                                <div className="text">
                                    <p className='txt'>{item.name}</p>
                                     <span className='span'>原价￥{item.salesPrice.value}</span>
                                     <p className='actPrice'>活动价￥<span>{item.salesPrice.value}</span></p>
                                     <a href="" onClick={()=>{this.removeCollect(item.id)}}>取消收藏</a>
                                </div>
                            </div>
                        )
                    }):<div>您还没有收藏哦，快去看看吧</div>
                  }
                 </div>
            </div>
        );
    }
}

export default Collect;